<template>
  <view>
    <up-row type="flex" class="classify-content" :style="{  height: 'calc(100vh - 45px)' }">
      <view class="left">
        <up-list
          @scrolltolower="scrolltolower"
        >
          <up-list-item
            v-for="(item, index) in categoryList"
            :key="index"
          >
            <up-cell
              :title="item.text || '未知'"
              :clickable="true"
              :class="[item.value == classifyId ? 'active' : '']"
              @click="chooseItem(item)"
            >
            </up-cell>
          </up-list-item>
        </up-list>
      </view>
      <view class="right u-p-5">
        <up-list
          @scrolltolower="scrolltolower"
        >
          <up-grid
            :border="false"
            :col="2"
            gap="5px"
          >
              <up-grid-item
                v-for="(item, index) in goodsList"
                :key="index"
              >
                <up-list-item>
                  <goods-item
                    :data="item"
                    type="vertical"
                    size="calc((100vw - 100px) / 2 - 7.5px)"
                  ></goods-item>
                </up-list-item>
                
              </up-grid-item>
          </up-grid>
          
        </up-list>
      </view>
    </up-row>
  </view>
</template>

<script>
import goodsItem from '@/components/goods-item/goods-item.vue';
export default {
  components: {
    goodsItem
  },
  data() {
    return {
      classifyId: '',
      pageIndex: 1,
      pageSize: 15,
      categoryList: [],
      goodsList: []
    }
  },
  onLoad(options) {
    this.classifyId = options.id || ''
    this.init()
    this.getGoods()
  },
  methods: {
    scrolltolower() {
      this.getGoods()
    },
    async init() {
      let { data } = await this.$api.goods.categorys()
      data.unshift({
        value: '',
        text: '全部'
      })
      this.categoryList = data
    },
    async getGoods() {
      let { data } = await this.$api.goods.getByCategory({
        "pageIndex":this.pageIndex,
        "pageSize": this.pageSize,
        "categoryId": this.classifyId
      })
      if (data?.items.length) {
        this.goodsList = [
          ...this.goodsList,
          ...data.items
        ]
        this.pageIndex++
      } else {
        if (this.pageIndex > 1) {
          this.$u.toast('没有更多数据了')
        } else {
          this.$u.toast('暂无数据')
        }
      }
    },
    chooseItem(item) {
      this.pageIndex = 1;
      this.goodsList = []
      this.classifyId = item.value
      this.getGoods()
    }
  },
}
</script>

<style lang="scss" scoped>
.classify-content {
  width: 100%;
}
.left {
  width: 200rpx;
  height: 100%;
  border-right: 1rpx solid $u-border-color;
  overflow: scroll;
}
.right {
  flex: 1;
  height: 100%;
  padding: 0.1rpx;
  box-sizing: border-box;
  overflow: hidden;
}

:deep(.u-cell__body .u-cell__title-text) {
  color: $u-content-color;
}
:deep(.active) {
  border-bottom: 1rpx solid $u-warning;
  .u-cell__title-text {
    color: $u-main-color;
  }
}
</style>